/**
 * Created by Administrator on 2017/6/28.
 */
/**
 * Created by Administrator on 2017/6/15.
 */

import React from 'react'
import {
    Text,FlatList,StyleSheet,View,TouchableHighlight,Image
} from 'react-native'

const REQUEST_URL = 'http://c.m.163.com/nc/article/headline/T1348647909107/0-20.html';
export default class TabPage_1 extends React.Component{

    static navigationOptions =({navigation}) =>({
        headerStyle: {
            height: 0,
        },
    })

    _keyExtractor = (item,index) => item.postid; // FlatList给每一个Item设置一个唯一的键值

    constructor(props){
        super(props);
        this.state = {
            movies: [],
        };
    }

    render() {
        if (!this.state.movies) {
            return this.renderLoadingView();
        }
        return this.renderMovie();
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        fetch(REQUEST_URL, {
            method: 'GET'
        })
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    movies: responseData.T1348647909107
                });
            })
            .catch((error) => {
                callback(error);
            });
    }



    renderMovie() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.movies}
                    keyExtractor={this._keyExtractor}
                    renderItem={({item}) => this.customItem(item)}
                />
            </View>
        );
    }
    customItem(item){
        var mWidth = require('Dimensions').get('window').width - 130;
        const param = this.props;
        return(
            <TouchableHighlight onPress={()=>this.props.navigation.navigate('newsDetails',{user:item})}>
                <View style={{height:90,flexDirection:'row', backgroundColor:'#fff'}}>
                    <Image onPress={() => {alert("aaaaaaaaaaaaaaaa")}} source={{uri:item.imgsrc}} style={{
                        marginTop:10,
                        marginLeft:10,
                        height:80,
                        width:120,
                    }}/>
                    <View style={{width:mWidth,height:80,marginTop:10,marginBottom:10,flexDirection:'column',backgroundColor:'#fff'}}>
                        <Text style={{marginLeft:8,paddingRight:8,fontSize:16,fontWeight:'bold'}}>{item.title}</Text>
                        <Text style={{marginLeft:8,paddingRight:8,marginTop:8,fontSize:12}}>{item.source}</Text>
                    </View>
                </View>
            </TouchableHighlight>
        );
    }

    renderLoadingView() {
        return (
            <View style={styles.container}>
                <Text>
                    正在加载电影数据......
                </Text>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container:{
        flex:1
    }
})